<template>
  <div class="view">
    <div class="left-tree">
      <el-tree
        :data="treeData"
        :props="treeProps"
        ref="organTree"
        highlight-current
        @node-click="nodeSelect"
        :expand-on-click-node="false"
        node-key="organId"
      >
      </el-tree>
    </div>
    <div class="right-table">
      <div style="margin-bottom: 10px">
        <el-button
          type="primary"
          icon="el-icon-circle-plus-outline"
          @click="handleItemAdd"
          >新增机构</el-button
        >
        <el-link style="float: right" v-show="selectNode" @click="reset"
          >返回上级</el-link
        >
      </div>
      <table-list
        :data="listData"
        :column-cfg="columnCfg"
        :show-pagination="false"
        @refresh-list="getList"
        @edit-item="handleEditItem"
        @delete-item="handleDeleteItem"
      >
      </table-list>
      <item-detail ref="itemDetail" @data-change="getList"></item-detail>
    </div>
  </div>
</template>

<script>
import TableList from '@/components/TableList/index';
import ItemDetail from './components/OrganDetail';

import { list, batchDelete } from '@/api/system/organ';
import { arrayToTree } from '@/utils';

export default {
  name: 'OrganizationManage',
  components: {
    TableList,
    ItemDetail,
  },
  props: {},
  data() {
    return {
      treeData: [],
      selectNode: '',
      // 树形控件，树形绑定对象
      treeProps: {
        id: 'organId',
        label: 'organName',
        children: 'children',
      },

      listData: [],
      columnCfg: {
        organName: { label: '机构名称' },
        showOrder: { label: '机构类型' },
        enable: { label: '机构状态', dictKey: 'data_status', tag: 'enable' },
        description: { label: '机构描述' },
        createTime: { label: '创建时间' },
        ':action': {
          label: '操作',
          width: '140',
          actionArr: [
            {
              label: '编辑',
              event: 'edit-item',
              btnType: '',
            },
            {
              label: '删除',
              event: 'delete-item',
              btnType: 'danger',
            },
          ],
        },
      },
    };
  },
  computed: {},
  created() {
    this.getList();
  },
  mounted() {},
  methods: {
    /**
     * 树节点选中
     * */
    nodeSelect(data, node) {
      this.listData = data.children || [];
      this.selectNode = data;
    },

    /**
     * 点击空白处清除树节点选中
     * */
    reset() {
      this.$refs.organTree.setCurrentKey(null);
      this.listData = this.treeData;
      this.selectNode = null;
    },
    /**
     * 添加按钮
     */
    handleItemAdd() {
      this.$refs.itemDetail.show('add', this.selectNode);
    },
    /**
     * 编辑行记录
     * @param row
     */
    handleEditItem(row) {
      this.$refs.itemDetail.show('edit', row);
    },

    /**
     * 删除行记录
     * @param row
     */
    handleDeleteItem(row) {
      this.$confirm('此操作将永久删除该机构, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        cancelButtonClass: 'cancel-msgbtn', confirmButtonClass: 'confirm-msgbtn', type: 'warning',
      })
        .then(() => {
          batchDelete(row.organId).then((res) => {
            this.$message.success('删除成功');
            this.getList();
          });
        })
        .catch(() => {});
    },

    /**
     * 获取更新表格数据
     * @param params 筛选条件
     * @param reset 是否重置筛选条件
     */
    getList(params, reset) {
      this.listData = [];
      list().then((res) => {
        this.treeData = arrayToTree(res.rows, 'organId', 'preorganid');
        if (this.selectNode) {
          this.$nextTick(() => {
            this.$refs.organTree.setCurrentKey(this.selectNode.organId);
            this.listData = this.$refs.organTree.getCurrentNode().children;
          });
        } else {
          this.listData = this.treeData;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.view {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  .left-tree {
    width: 230px;
    height: 100%;
    background-color: #fff;
    padding: 16px 8px;
  }
  .right-table {
    width: calc(100% - 252px);
    height: 100%;
    background-color: #fff;
    padding: 16px;
    overflow-y: auto;
    &::-webkit-scrollbar {
      /*滚动条整体样式*/
      width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
      height: 4px;
    }
    &::-webkit-scrollbar-track-piece {
      background: rgba(200, 200, 200, 0.1);
    }
    &::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 8px;
      background: rgba(200, 200, 200, 0.5);
    }
  }
}
::v-deep .el-tree {
  flex: 1;
  overflow: auto;
  &::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 4px;
  }
  &::-webkit-scrollbar-track-piece {
    background: rgba(200, 200, 200, 0.1);
  }
  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 8px;
    background: rgba(200, 200, 200, 0.5);
  }
  .el-tree-node {
    width: 100%;
    min-width: max-content;
  }
}
</style>
